<template>
	<view class="waterfall-box">
		<view class="waterfall-item">
			<!-- <view wx:if="{{ a }}" class="waterfall-activity" style="height:556rpx">
				<swiper class="waterfall-activity-item" circular autoplay>
					<swiper-item wx:for="{{ b }}" wx:for-item="item" wx:key="l" data-url="{{ item.m }}" bindtap="{{ item.n }}">
						<view class="waterfall-activity-item">
							<view class="waterfall-activity-img">
								<lazy-image wx:if="{{ item.b }}" u-i="{{ item.a }}" bind:__l="__l" u-p="{{ item.b }}"></lazy-image>
								<view class="zt df">{{item.c}}</view>
								<view class="xxbt">
									<view class="waterfall-activity-name ohto">{{item.d}}</view>
									<view class="waterfall-activity-tag df">
										<image src="{{ c }}" style="margin-right:4rpx"></image>
										<view class="ohto">{{item.e}}</view>
									</view>
								</view>
							</view>
							<view class="waterfall-activity-tag df">
								<image src="{{ d }}" style="margin-right:4rpx"></image>
								<view class="ohto">{{item.f}}</view>
							</view>
							<view wx:if="{{ item.g }}" class="waterfall-activity-group">
								<view wx:for="{{ item.h }}" wx:for-item="img" wx:key="b" class="group-img">
									<image src="{{ img.a }}" mode="aspectFill"></image>
								</view>
								<view class="group-tit">{{item.i}}人已参加</view>
							</view>
							<view wx:else style="margin-left:16rpx;font-size:20rpx">{{item.j}} 人想参加</view>
							<view class="waterfall-activity-btn small df">
								<text>{{item.k}}</text>
								<image class="effect" src="{{ e }}" style="margin-left:16rpx"></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="waterfall-activity-btn big df" data-url="activity/index?type=0" bindtap="{{ f }}">
					<text>查看全部活动</text>
				</view>
			</view> -->
			<view 
				v-for="(v,i) in leftList" 
				:key="i" 
				class="waterfall-note" 
				:style="'height:' + v.bgHigh" 
				:data-url="2 == v.type ? 'dynamic/video?id=' + v.id : 'dynamic/details?id=' + v.id" 
				@click="navigateToFun"
			>
				<view v-if="0 != v.type" class="waterfall-note-top" :style="'height:' + v.high + 'rpx'">
					<lazy-load v-if="1 == v.type || 2 == v.type " :src="v.url" border-radius="8rpx"></lazy-load>
					<image v-if="1 == v.type && v.img_count > 1" class="xxiv" src="/static/img/i.png"></image>
					<image v-if="2 == v.type" class="xxiv" src="/static/img/v.png"></image>
					<view v-if="3 == v.type" class="xxa">
						<image class="xxa-bg" style="z-index:-2" :src="v.audio.cover"></image>
						<view class="xxa-mb"></view>
						<view class="xxa-top">
							<image class="xxa-top" :src="v.audio.cover"></image>
							<image class="xxa-icon" src="/static/img/yw.png"></image>
						</view>
						<view class="xxa-t ohto">{{e.audio.name}}</view>
						<view class="xxa-tt ohto">{{e.audio.intro}}</view>
						<view class="xxa-play df">
							<image src="/static/img/a.png"></image>
							<text>去播放</text>
						</view>
					</view>
					<view v-if="v.top" class="xxzd df">置顶</view>
				</view>
				<view v-if="0 == v.type" class="wlc10">
					<view class="waterfall-note-content ohto2" style="-webkit-line-clamp:10;margin-top:0;height:350rpx">{{v.content}}</view>
				</view>
				<view v-else :class="['waterfall-note-content', 'ohto2', v.contentOne && 'wlc1']">{{v.content}}</view>
				<view class="waterfall-note-bottom df">
					<view class="waterfall-note-user df">
						<image :src="v.user.avatar" mode="aspectFill" style="border-radius:50%"></image>
						<view class="ohto">{{v.user.name}}</view>
					</view>
					<view class="waterfall-note-like df" @click.stop="likeClick(0,i)">
						<image v-if="v.is_like" class="hi" src="/static/img/dz1.png"></image>
						<image v-else class="hi" src="/static/img/dz.png"></image>
						<text>{{v.like_count}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="waterfall-item">
			<view
				v-for="(v,i) in rightList" 
				:key="i"
				class="waterfall-note"
				:style="'height:' + v.bgHigh"
				:data-url="2 == v.type ? 'dynamic/video?id=' + v.id : 'dynamic/details?id=' + v.id"
				@click="navigateToFun"
			>
				<view v-if="0 != v.type" class="waterfall-note-top" :style="'height:' + v.high + 'rpx'">
					<lazy-load v-if="1 == v.type || 2 == v.type " :src="v.url" border-radius="8rpx"></lazy-load>
					<image v-if="1 == v.type && v.img_count > 1" class="xxiv" src="/static/img/i.png"></image>
					<image v-if="2 == v.type" class="xxiv" src="/static/img/v.png"></image>
					<view v-if="3 == v.type" class="xxa">
						<image class="xxa-bg" style="z-index:-2" :src="v.audio.cover"></image>
						<view class="xxa-mb"></view>
						<view class="xxa-top">
							<image class="xxa-top" :src="v.audio.cover"></image>
							<image class="xxa-icon" src="/static/img/yw.png"></image>
						</view>
						<view class="xxa-t ohto">{{e.audio.name}}</view>
						<view class="xxa-tt ohto">{{e.audio.intro}}</view>
						<view class="xxa-play df">
							<image src="/static/img/a.png"></image>
							<text>去播放</text>
						</view>
					</view>
					<view v-if="v.top" class="xxzd df">置顶</view>
				</view>
				<view v-if="0 == v.type" class="wlc10">
					<view class="waterfall-note-content ohto2" style="-webkit-line-clamp:10;margin-top:0;height:350rpx">{{v.content}}</view>
				</view>
				<view v-else :class="['waterfall-note-content', 'ohto2', v.contentOne && 'wlc1']">{{v.content}}</view>
				<view class="waterfall-note-bottom df">
					<view class="waterfall-note-user df">
						<image :src="v.user.avatar" mode="aspectFill" style="border-radius:50%"></image>
						<view class="ohto">{{v.user.name}}</view>
					</view>
					<view class="waterfall-note-like df" @click.stop="likeClick(1,i)">
						<image v-if="v.is_like" class="hi" src="/static/img/dz1.png"></image>
						<image v-else class="hi" src="/static/img/dz.png"></image>
						<text>{{v.like_count}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const api = require('@/config/api');
	const util = require('@/utils/util');
	export default {
		props: {
		  page: { 
				  type: Number, 
				  default: 1 ,
			  },
		  activity: { 
				  type: Array, 
				  default: [], 
				  required: !1 ,
			  },
		  list: { 
				  type: Array, 
				  default: [], 
				  required: !1 ,
			  },
		},
		data() {
			return {
				left: 0,
				right: 0,
				leftList: [],
				rightList: [],
			}
		},
		watch:{
			list(newlist,oldlist) {
				this.tolist(newlist);
			},
		},
		methods: {
			tolist(newlist) {
				if (1 == this.page)
				{
				    if(this.activity.length) this.left = 556;
					if(!this.activity.length) this.left = 0;
					this.right = 0;
					this.leftList = [],
					this.rightList = [];
				}else{
					let lrlength = this.leftList.length + this.rightList.length;
					lrlength = newlist.length - lrlength;
					newlist = newlist.slice(-lrlength);
				}
				for (let key in newlist) {
					let i = 3 == newlist[key].type ? 374 : 392;
					if (1 == newlist[key].type || 2 == newlist[key].type) {
						let type = newlist[key][1 == newlist[key].type ? "img" : "video"];
						let height = parseInt((363 * type.high) / type.wide);
						i =
						height > 272 && height < 484
						? height
						: type.wide == type.high
						? 363
						: type.wide > type.high
						? 272
						: 484;
					}
					let height = i;
					if (0 !== newlist[key].type) {
						let i = Array.from(newlist[key].content).length;
						height += i > 13 ? 87 : 51;
						newlist[key].contentOne = i <= 13;
					}
					newlist[key].high = i;
					newlist[key].bgHigh = height + 64;
					if(this.left <= this.right)
					{
						this.left += newlist[key].bgHigh;
						this.leftList.push(newlist[key]);
					}else{
						this.right += newlist[key].bgHigh;
						this.rightList.push(newlist[key]);
					}
				}
				console.log(this.leftList);
				// console.log(this.rightList);
			},
			
			likeClick(type,i) {
				let that = this,list = [];
				if(type==0){
					list = that.leftList;
				}else{
					list = that.rightList;
				}
				let is_like = list[i].is_like;
				//let like_count = that.leftList[i].like_count;
				if (!is_like) list[i].like_count++;
				if (is_like) list[i].like_count--;
				list[i].is_like = !is_like;

				// this.$emit('likeback', {
				// 	idx: that.idx,
				// 	is_like: is_like,
				// 	like_count: like_count
				// })
				util.request(api.likeDynamicUrl, {
					id: list[i].id,
					duid: list[i].user_id,
					is_like: list[i].is_like,
					content: list[i].content,
					img: list[i].img_count>0 ? list[i].url : '',
				}, 'POST');
			},
			navigateToFun(e) {
				let url = e.currentTarget.dataset.url;
				console.log(url);
				util.navigateTo({
					url: '/pages/' + url,
					login: false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall-box {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	}
	.waterfall-item {
	  width: calc(50% - 4rpx);
	}
	.waterfall-note,
	.waterfall-activity {
	  margin: 8rpx 0;
	}
	.waterfall-note .waterfall-note-top,
	.waterfall-activity .waterfall-activity-item,
	.waterfall-activity .waterfall-activity-btn,
	.wlc10 {
	  border-radius: 8rpx;
	}
	.waterfall-note .waterfall-note-top {
	  width: 100%;
	  position: relative;
	  overflow: hidden;
	}
	.waterfall-note-top .xxiv,
	.waterfall-note-top .xxa .xxa-top .xxa-icon {
	  filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.2));
	}
	.waterfall-note-top .xxiv {
	  position: absolute;
	  top: 20rpx;
	  right: 20rpx;
	  width: 28rpx;
	  height: 28rpx;
	}
	.waterfall-note-top .xxa {
	  width: calc(100% - 64rpx);
	  height: calc(100% - 64rpx);
	  padding: 32rpx;
	  position: relative;
	  z-index: 1;
	  color: #fff;
	}
	.waterfall-note-top .xxa .xxa-bg,
	.waterfall-note-top .xxa .xxa-mb {
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.waterfall-note-top .xxa .xxa-mb {
	  z-index: -1;
	  -webkit-backdrop-filter: saturate(150%) blur(25px);
	  backdrop-filter: saturate(150%) blur(25px);
	  background: rgba(0, 0, 0, 0.5);
	}
	.waterfall-note-top .xxa .xxa-top {
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 16rpx;
	  justify-content: center;
	  position: relative;
	  overflow: hidden;
	}
	.waterfall-note-top .xxa .xxa-top .xxa-icon {
	  position: absolute;
	  top: 35rpx;
	  right: 35rpx;
	  bottom: 35rpx;
	  left: 35rpx;
	  width: 50rpx;
	  height: 50rpx;
	}
	.waterfall-note-top .xxa .xxa-t {
	  margin-top: 32rpx;
	  font-size: 26rpx;
	  font-weight: 700;
	}
	.waterfall-note-top .xxa .xxa-tt {
	  margin: 8rpx 0 32rpx;
	  opacity: 0.8;
	  font-size: 20rpx;
	}
	.waterfall-note-top .xxa .xxa-play {
	  width: 100%;
	  height: 60rpx;
	  font-size: 18rpx;
	  font-weight: 700;
	  border-radius: 60rpx;
	  justify-content: center;
	  background: rgba(255, 255, 255, 0.15);
	}
	.waterfall-note-top .xxa .xxa-play image {
	  margin-right: 8rpx;
	  width: 16rpx;
	  height: 16rpx;
	}
	.waterfall-note-top .xxzd {
	  position: absolute;
	  top: 20rpx;
	  left: 20rpx;
	  width: 52rpx;
	  height: 34rpx;
	  color: #fff;
	  font-size: 16rpx;
	  justify-content: center;
	  background: rgba(0, 0, 0, 0.4);
	  border: 1px solid rgba(255, 255, 255, 0.16);
	  border-radius: 8rpx;
	}
	.waterfall-note .waterfall-note-content {
	  width: calc(100% - 32rpx);
	  margin: 16rpx 16rpx 0;
	  font-size: 26rpx;
	  font-weight: 500;
	  line-height: 36rpx;
	  word-break: break-word;
	  white-space: pre-line;
	}
	.waterfall-note .waterfall-note-bottom {
	  width: calc(100% - 32rpx);
	  margin: 0 16rpx;
	  height: 64rpx;
	  justify-content: space-between;
	}
	.waterfall-note-bottom .waterfall-note-user image,
	.waterfall-note-bottom .waterfall-note-like image {
	  width: 32rpx;
	  height: 32rpx;
	}
	.waterfall-note .waterfall-note-top,
	.waterfall-note-bottom .waterfall-note-user image,
	.waterfall-activity .waterfall-activity-item,
	.waterfall-activity .big,
	.wlc10 {
	  background: #f8f8f8;
	}
	.waterfall-note-bottom .waterfall-note-user view,
	.waterfall-note-bottom .waterfall-note-like text {
	  margin-left: 8rpx;
	  line-height: 32rpx;
	}
	.waterfall-note-bottom .waterfall-note-user view {
	  color: #333;
	  max-width: 200rpx;
	  font-size: 18rpx;
	}
	.waterfall-note-bottom .waterfall-note-like text {
	  color: #999;
	  font-size: 20rpx;
	}
	.waterfall-activity .waterfall-activity-item {
	  height: 470rpx;
	  overflow: hidden;
	}
	.waterfall-activity-item .waterfall-activity-img {
	  margin-bottom: 16rpx;
	  width: 100%;
	  height: 290rpx;
	  position: relative;
	}
	.waterfall-activity-img .zt {
	  position: absolute;
	  top: 16rpx;
	  left: 16rpx;
	  width: 68rpx;
	  height: 38rpx;
	  color: #fff;
	  font-size: 16rpx;
	  font-weight: 700;
	  background: rgba(0, 0, 0, 0.4);
	  border: 1px solid rgba(255, 255, 255, 0.16);
	  border-radius: 8rpx;
	  justify-content: center;
	}
	.waterfall-activity-img .xxbt {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  padding: 24rpx 0 8rpx;
	  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	}
	.waterfall-activity-img .waterfall-activity-name,
	.waterfall-activity-item .waterfall-activity-tag {
	  width: calc(100% - 32rpx);
	  padding: 0 16rpx 8rpx;
	}
	.waterfall-activity-img .waterfall-activity-name {
	  color: #fff;
	  font-size: 24rpx;
	  font-weight: 700;
	}
	.waterfall-activity-item .waterfall-activity-tag image,
	.waterfall-activity .waterfall-activity-btn image {
	  width: 20rpx;
	  height: 20rpx;
	}
	.waterfall-activity-item .waterfall-activity-tag view {
	  width: calc(100% - 28rpx);
	  color: #999;
	  font-size: 20rpx;
	  font-weight: 500;
	}
	.waterfall-activity-group {
	  margin-left: 31rpx;
	  direction: ltr;
	  unicode-bidi: bidi-override;
	  display: inline-block;
	}
	.waterfall-activity-group .group-img {
	  width: 32rpx;
	  height: 32rpx;
	  display: inline-flex;
	  position: relative;
	  margin-left: -16rpx;
	  border: 2rpx solid #f8f8f8;
	  background: #fff;
	  vertical-align: middle;
	  border-radius: 50%;
	}
	.waterfall-activity-group .group-img image {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	}
	.waterfall-activity-group .group-tit {
	  display: inline-flex;
	  margin-left: 8rpx;
	  color: #999;
	  font-size: 20rpx;
	  font-weight: 500;
	}
	.waterfall-activity .waterfall-activity-btn {
	  margin-top: 8rpx;
	  font-weight: 700;
	  justify-content: center;
	}
	.waterfall-activity .big {
	  width: 100%;
	  font-size: 22rpx;
	  height: 70rpx;
	}
	.waterfall-activity .small {
	  position: absolute;
	  left: 16rpx;
	  bottom: 16rpx;
	  font-size: 20rpx;
	  width: calc(100% - 32rpx);
	  height: 60rpx;
	  background: #fff;
	}
	.wlc1 {
	  -webkit-line-clamp: 1 !important;
	}
	.wlc10 {
	  width: 100%;
	  padding: 16rpx 0;
	}

</style>